<template>
	<view class="container">
		<view class="search">
			<Search></Search>
		</view>
		<view class="swiper">
			<SwiperList :swiperList="swiperList"></SwiperList>
		</view>
		<view class="category">
			<Category @handleCategory="handleCategory" :categoryList="categoryList"></Category>
		</view>
		<view class="rebooks">
			<view class="rebooks_top">
				<view class="rebooks_top_left">猜你喜欢</view>
				<Tags :tagname="rebooksTagname"></Tags>
			</view>
			<view class="rebooks_bottom">
				<Rebooks @handleRebooks="handleRebooks" :rebooks="rebooks"></Rebooks>
			</view>
		</view>
		<view class="bookResources">
			<BookResources @handleChild="handleChild" :bookResources="bookResources"></BookResources>
		</view>
		<view class="footer">
			<view class="footer_box">
				<view class="footer_box_top">
					<view class="leftTime">00:00</view>
					<view class="line_box">
						<view class="circular"></view>
						<view class="line"></view>
					</view>
					<view class="rightTime">00:00</view>
				</view>
				<view class="footer_box_bottom">
					<view class="footer_box_bottom_left">
						<view class="song">歌手: Michael Jackson</view>
						<view class="singer">歌曲: Billie Jean</view>
					</view>
					<view class="footer_box_bottom_right">
						<i class="iconfont icon-shangyishou1"></i>
						<i @click="changeIconStatus" :class="`iconfont ${iconStatus ? 'icon-bofang' : 'icon-zanting'} changeIcon`"></i>
						<i class="iconfont icon-shangyishou2"></i>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Home from "@/model/home.js"
	import Search from "@/components/search/search.vue"
	import SwiperList from "@/components/swiperlist/swiperlist.vue"
	import Category from "@/components/category/category.vue"
	import Tags from "@/components/tag/tag.vue"
	import Rebooks from "@/components/rebooks/rebooks.vue"
	import BookResources from "@/components/bookResources/bookResources.vue"
	export default {
		data() {
			return {
				iconStatus: true,
				rebooksTagname: "更多推荐",
				swiperList: [],
				rebooks: [],
				bookResources: [],
				categoryList: [
					{
						id: 1,
						icon: 'icon-tubiao',
						name: '看榜单',
						color: '#ffc107'
					},
					{
						id: 2,
						icon: 'icon-yuedu',
						name: '听小说',
						color: ''
					},
					{
						id: 3,
						icon: 'icon-icon09',
						name: '听音乐',
						color: '#0056b3'
					},
					{
						id: 4,
						icon: 'icon-zhishi',
						name: '听知识',
						color: '#28a745;'
					}
				]
			}
		},
		components:{
			Search,
			SwiperList,
			Category,
			Tags,
			Rebooks,
			BookResources
		},
		onLoad() {
			this.getHomeList();
		},
		methods: {
			async getHomeList(){
				const res = await Home.getHomeList()
				this.swiperList = res.swiperImages
				this.rebooks = res.Rebooks
				this.bookResources = res.bookResources
			},
			changeIconStatus(){
				this.iconStatus = !this.iconStatus
			},
			handleCategory(event){
				// console.log(event)
				switch (event){
					case 1:
					uni.navigateTo({
						url: "/pages/readlist/readlist"
					})
					break;
					case 2:
					uni.navigateTo({
						url: "/pages/listenNoval/listenNoval"
					})
					break;
					case 3:
					uni.navigateTo({
						url: "/pages/listenMusic/listenMusic"
					})
					break;
					case 4:
					uni.navigateTo({
						url: "/pages/listenKnowledge/listenKnowledge"
					})
					break;
				}
			},
			handleRebooks(event){
				uni.navigateTo({
					url: `/pages/bookDetail/bookDetail?bookID=${event}`
				})
			},
			handleChild(event){
				uni.navigateTo({
					url: `/pages/bookDetail/bookDetail?bookID=${event}`
				})
			}
		}
	}
</script>

<style>
.container{
	width: 100%;
	/* height: 100%; */
}
.search{
	margin-top: 30rpx;
}
.rebooks{
	width: 100%;
	padding: 0 20rpx;
	box-sizing: border-box;
	margin-top: 60rpx;
}
.rebooks_top{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.rebooks_top_left{
	font-size: 40rpx;
}

.footer {
	width: 100%;
	padding: 0 20rpx;
	box-sizing: border-box;
}
.footer_box{
	width: 95%;
	height: 176rpx;
	background-color: rgb(209, 204, 192);
	opacity: 0.9;
	border-radius: 10rpx;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: var(--window-bottom , 0);
	padding: 0 30rpx;
	box-sizing: border-box;
}
.footer_box_top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 76rpx;
	/* background-color: #007AFF; */
}
.footer_box_top .leftTime{
	font-size: 36rpx;
	color: #808080;
}
.footer_box_top .rightTime{
	font-size: 36rpx;
	color: #808080;
}
.footer_box_top .line_box{
	width: 480rpx;
	height: 100%;
	/* background-color: #4CD964; */
	display: flex;
	align-items: center;
	justify-content: center;
}
.line_box .circular{
	width: 30rpx;
	height: 30rpx;
	background-color: #fff;
	border-radius: 50%;
}
.line_box .line{
	width: 400rpx;
	height: 4rpx;
	background-color: #fff;
}
.footer_box_bottom{
	width: 100%;
	height: 100rpx;
	/* background-color: #007AFF; */
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.footer_box_bottom_left {
	color: #333;
}
.footer_box_bottom_right {
	width: 220rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.icon-shangyishou1{
	font-size: 60rpx;
	color: #333;
}
.icon-shangyishou2{
	font-size: 60rpx;
	color: #333;
}
.changeIcon {
	font-size: 70rpx;
	color: #333;
}
</style>
